<template>
    <div>
        <el-dialog :title="info.isAdd ? '添加秒杀' : '编辑秒杀'" :visible.sync="info.isShow" :before-close="cancel" width="60%"
            center>
            <el-form :model="seckForm" :rules="rules" ref="seckForm">
                <el-form-item label="活动名称" prop="title" :label-width="formLabelWidth">
                    <el-input v-model="seckForm.title"></el-input>
                </el-form-item>
                <el-form-item label="活动期限" :label-width="formLabelWidth">
                    <el-date-picker style="width: 100%;" v-model="time11" type="datetimerange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" @change="changeTime" value-format="timestamp">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="一级分类" prop="first_cateid" :label-width="formLabelWidth">
                    <el-select v-model="seckForm.first_cateid" placeholder="请选择分类" @change="changeCate(false)">
                        <el-option v-for="item in catelist" :key="item.id" :label="item.catename" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="二级分类" prop="second_cateid" :label-width="formLabelWidth">
                    <el-select v-model="seckForm.second_cateid" placeholder="请选择分类" @change="changeSec(false)">
                        <el-option v-for="item in secondlist" :key="item.id" :label="item.catename" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品" :label-width="formLabelWidth" prop="goodsid">
                    <el-select v-model="seckForm.goodsid" placeholder="请选择商品">
                        <el-option v-for="item in goodsList" :key="item.id" :label="item.goodsname" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="seckForm.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
                <el-form-item>
                    <el-button @click="cancel">取消</el-button>
                    <el-button @click="submitForm" type="primary">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
// 引入接口
import { seckAdd, seckEdit, seckInfo } from '../../request/api'
// 引入辅助性函数
import { mapActions, mapGetters } from 'vuex'
export default {
    props: ["info"],
    data() {
        return {
            seckForm: {
                title: '', // 限时秒杀名称
                begintime: '', // 开始时间
                endtime: '', // 结束时间
                first_cateid: '',// 商品一级分类编号
                second_cateid: '', // 商品二级分类编号
                goodsid: '', // 商品编号
                status: 1, // 状态
            },
            rules: {
                title: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
            },
            formLabelWidth: '90px',
            // 二级分类
            secondlist: [],
            // 商品
            goodsList: [],
            time11: [],
        };
    },
    computed: {
        ...mapGetters({
            goodslist: 'spgl/getGoodsList',
            catelist: 'cate/getCteList',
            secklist: 'seck/getSeckList'
        })
    },
    mounted() {
        this.getGoods()
        this.getCate()
        this.getSeck()
    },
    methods: {
        // 回显
        lookup(id) {
            // console.log(id,'idiididididi');
            seckInfo({ id }).then(res => {
                // console.log(res,'秒杀编辑');
                if (res.code == 200) {
                    this.$message.success(res.msg)
                    this.seckForm = res.list
                    this.changeCate(true)
                    this.changeSec(true)
                    this.seckForm.id = id
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        // 切换一级
        changeCate(n) {
            this.secondlist = []
            this.goodsList = []
            // console.log(n, 'kkkkk');
            // 通过findIndex来进行查找分类id是否与秒杀列表的一级分类id是否相同，返回下标
            let index = this.catelist.findIndex(item => item.id == this.seckForm.first_cateid)
            this.secondlist = this.catelist[index].children
            // 清空二级分类和商品的双向数据绑定的值
            if (!n) {
                this.seckForm.second_cateid = ''
                this.seckForm.goodsid = ''
            }
        },
        // 切换二级
        changeSec(n) {
            // console.log(n, '二级');
            // 通过数组filter过滤方法，来过滤掉二级id 与商品列表一致的 返回的是一个新的数组
            let res = this.goodslist.filter(item => item.second_cateid == this.seckForm.second_cateid)
            this.goodsList = res
            // console.log(res,'查询结果');
            // 查找下标
            let index = this.goodslist.findIndex(item => item.second_cateid == this.seckForm.second_cateid)
            // console.log(this.seckForm.second_cateid,'商品id');
            // console.log(this.goodslist,'商品分类列表');
            if (!n) {
                this.seckForm.goodsid = ''
                this.goodsList = res
            }
        },
        ...mapActions({
            getGoods: 'spgl/getGoodsListAction',
            getCate: 'cate/changeCateAction',
            getSeck: 'seck/changeSeckAction'
        }),
        submitForm() {
            this.$refs.seckForm.validate((valid) => {
                if (valid) {
                    if (this.info.isAdd) {
                        // console.log('添加');
                        console.log(this.seckForm, '秒杀表单');
                        seckAdd(this.seckForm).then(res => {
                            // console.log(res, '添加秒杀');
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                this.cancel()
                                this.getSeck()
                                this.rest()
                            }
                        })
                    } else {
                        // console.log('编辑');
                        seckEdit(this.seckForm).then(res => {
                            // console.log(res, '秒杀编辑');
                            if (res.code == 200) {
                                this.cancel()
                                this.getSeck()
                            }
                        })
                    }
                } else {
                    return false;
                }
            });
        },
        // 取消
        cancel() {
            // 子传父
            this.$emit('cancel', false)
            // 调用取消事件
            this.rest()
        },
        // 改变时间
        changeTime(u) {
            console.log(u, '编辑时间');
            this.time11[0] = u.slice(0, 1)
            this.time11[1] = u.slice(1, 2)
            // console.log(time.slice(0, 1), time.slice(1, 2));
            this.seckForm.begintime = u.slice(0, 1);
            this.seckForm.endtime = u.slice(1, 2);
        },
        // 清空事件
        rest() {
            this.seckForm = {
                title: '', // 限时秒杀名称
                begintime: '', // 开始时间
                endtime: '', // 结束时间
                first_cateid: '',// 商品一级分类编号
                second_cateid: '', // 商品二级分类编号
                goodsid: '', // 商品编号
                status: 1, // 状态
            },
                // 清空验证方法
                this.$refs.seckForm.resetFields();
            this.time11 = []

        }
    }
};
</script>

<style scoped></style>
